import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { brandList } from '#/api/trade/brand';
import { spuList } from '#/api/trade/spu';

export const querySchema: FormSchemaGetter = () => [
  {
    component: 'Input',
    fieldName: 'skuCode',
    label: 'SKU编码',
  },
  {
    component: 'Input',
    fieldName: 'skuName',
    label: 'SKU名称',
  },
  {
    component: 'ApiSelect',
    componentProps: {
      api: () => brandList(),
      resultField: 'rows',
      labelField: 'brandName',
      valueField: 'id',
      showSearch: true,
      filterOption: (input: string, option: any) => {
        return option.label.toLowerCase().includes(input.toLowerCase());
      },
    },
    label: '品牌',
    fieldName: 'brandId',
  },
  {
    component: 'ApiSelect',
    componentProps: (formModel) => {
      return {
        api: () => spuList({ brandId: formModel.brandId }),
        params: { brandId: formModel.brandId }, // 显式添加brandId到params中
        resultField: 'rows',
        labelField: 'spuName',
        valueField: 'id',
        showSearch: true,
        filterOption: (input: string, option: any) => {
          return option.label.toLowerCase().includes(input.toLowerCase());
        },
        // 4. 根据 formModel.brandId 动态设置 placeholder 和 disabled 状态
        placeholder: formModel.brandId ? '请选择SPU' : '请先选择品牌',
      };
    },
    label: 'SPU',
    fieldName: 'spuId',
    dependencies: { // 5. dependencies 用于处理依赖关系
      trigger: (model) => { // model 即表单的 formModel
        model.spuId = undefined; // 当 brandId 变化时，清空 spuId 的值
      },
      triggerFields: ['brandId'], // 声明依赖于 brandId 字段
    },
  },
];

// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// export const columns: () => VxeGridProps['columns'] = () => [
export const columns: VxeGridProps['columns'] = [
  { type: 'checkbox', width: 60 },
  {
    title: 'SKU编码',
    field: 'skuCode',
  },
  {
    title: 'SKU名称',
    field: 'skuName',
  },
  {
    title: '品牌',
    field: 'brandName',
  },
  {
    title: 'SPU',
    field: 'spuName',
  },
  {
    field: 'action',
    fixed: 'right',
    slots: { default: 'action' },
    title: '操作',
    width: 180,
  },
];

export const drawerSchema: FormSchemaGetter = () => [
  {
    label: 'SKU ID',
    fieldName: 'id',
    component: 'Input',
    dependencies: {
      show: () => false,
      triggerFields: [''],
    },
  },
  {
    label: 'SKU编码',
    fieldName: 'skuCode',
    component: 'Input',
    componentProps: {
      placeholder: '请输入SKU编码，忽略则自动生成',
    },
    // rules: 'required', // 改为非必填，提交时自动生成
  },
  {
    label: 'SKU名称',
    fieldName: 'skuName',
    component: 'Input',
    rules: 'required',
  },
  {
    component: 'ApiSelect',
    componentProps: {
      api: () => brandList(),
      resultField: 'rows',
      labelField: 'brandName',
      valueField: 'id',
      showSearch: true,
      filterOption: (input: string, option: any) => {
        return option.label.toLowerCase().includes(input.toLowerCase());
      },
    },
    label: '品牌',
    fieldName: 'brandId',
    rules: 'selectRequired',
  },
  {
    component: 'ApiSelect',
    componentProps: (formModel) => { // 同样，componentProps 是一个接收 formModel 的函数
      return {
        api: () => spuList({ brandId: formModel.brandId }),
        params: { brandId: formModel.brandId }, // 显式添加brandId到params中
        resultField: 'rows',
        labelField: 'spuName',
        valueField: 'id',
        showSearch: true,
        filterOption: (input: string, option: any) => {
          return option.label.toLowerCase().includes(input.toLowerCase());
        },
        // 根据 formModel.brandId 动态设置 placeholder
        placeholder: formModel.brandId ? '请选择SPU' : '请先选择品牌',
        disabled: !formModel.brandId, // 当未选择品牌时，禁用SPU选择框
      };
    },
    label: 'SPU',
    fieldName: 'spuId',
    rules: 'selectRequired',
    dependencies: {
      trigger: (model) => { // model 即 formModel
          // model.spuId = undefined; // 当brandId变化时，清空spuId的值
      },
      triggerFields: ['brandId'], // 当brandId字段变化时触发
    },
  },
];
